/* display tested on Google Chrome and IE */

html * {
    margin: 0;
    margin-top: 0;
    /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}

/* GENERAL */

body {
    font-family: sans-serif;
    background-image: url(../images/hd.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #f4f4f4;
    /*background-image: url(../images/bglines.png);*/
}
div.wrapper{
    width:100%;
    position: absolute;
}

/* logo + hero pictures */
div.logo {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url(../images/chars-2.png);
    margin-top: -60px;
    padding-top: 50px;
    text-align: center;
    width: 970px;
    height: 240px;
    margin-left: auto;
    margin-right: auto;
}
div.logo:hover {
    background-image: url(../images/chars.png);
}

div.wrapper2{
    width:980px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: -64px;
}

#statusTab{
    width: 450px;
    position: relative;
    margin-left: 500px;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;

    background: #ffffff;  /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ffffff'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#ffffff)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #cccccc,  #ffffff); /* for firefox 3.6+ */

    color: #444;
    border-top: solid 1px #f8f8f8;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    font-weight: bold;
}

#statusTab a{
    color: #999999;
}
#statusTab a:hover{
    color: #0399d4;
}
/* The floatingtab-shopping */

#shoppingTab {
    color: #444;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    font-weight: bold;
    font-size: 18px;
    text-align: center;

    /* No bullets */
    list-style: none;

    /* Position and float the tab */ 
    position: fixed;
    z-index: 120;
    right: 0;
    top: 210px;

    /* Give the tab width and padding */
    width: 160px;
    padding: 10px 0px;

    /* Add the semitransparent gradient background */
    background: transparent;
}

/* General style for buttons within the tab */

#shoppingTab li, #shoppingTab a {
    display: block;
    width: 160px;
    background-image: url(../images/icons-shopping.png);
}
#shoppingTab li:hover, #shoppingTab a:hover {
    color: #e7e5e5;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

#shoppingTab li span {
    position: absolute;
    width: 150px;
    height: 85px;
    right:0px;
    text-indent: 90px;
    line-height: 80px;
}
#shoppingTab li.voucher span {
    line-height: 100px;
}
/* "Cart" button */
#shoppingTab li.cart {
    height: 85px;
    background-position: 0 0px;
}

#shoppingTab li.cart:hover {
    background-position: 0 -85px;
}
/* "Voucher" button */
#shoppingTab li.voucher {
    height: 85px;
    background-position: 0 -170px;
    margin-top: -5px;
}

#shoppingTab li.voucher:hover {
    background-position: 0 -255px;
}

/* The floatingtab */

#followTab {

    color: #444;
    border-top: solid 1px #f8f8f8;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    font-weight: bold;
    font-size: 16px;
    text-align: center;

    /* No bullets */
    list-style: none;

    /* Position and float the tab */ 
    position: fixed;
    z-index: 100;
    right: 0;
    top: 400px;

    /* Give the tab width and padding */
    width: 60px;
    padding: 8px 5px;

    /* Add the curved white border */
    border: 3px solid #fff;
    border-right: none;
    border-top: solid 1px #f8f8f8;
    -moz-border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;

    /* Add the drop shadow */
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
    box-shadow: 0 0 7px rgba(0, 0, 0, .6);

    /* Add the semitransparent gradient background */

    background: #d1d1d1; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

    /*orange
  background: rgba(239, 91, 10, .75);
  background: -moz-linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
  background: -webkit-gradient( linear, left top, left bottom, from( rgba(243, 52, 8, .75) ), to( rgba(239, 91, 10, .75) ) );
  background: linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
  filter: progid:DXImageTransform.Microsoft.Gradient( startColorStr='#c0f33408', endColorStr='#c0ef5b0a', GradientType=0 );
    */

}
/* Items within the tab */

#followTab li {
    margin: 2px 0 0 0;
    line-height: 0;
}

#followTab li:first-child {
    margin-top: 0;
}

/* General style for buttons within the tab */

#followTab a {
    display: block;
    width: 57px;
    background-image: url(../images/icons.png);
}

#followTab a span {
    position: absolute;
    top: -999em;
}
/* "Newsletter" button */

#followTab a.newsletter {
    height: 57px;
    background-position: 0 -342px;
}

#followTab a.newsletter:hover {
    background-position: 0 -399px;
}

/* "facebook" button */

#followTab a.facebook {
    height: 57px;
    background-position: 0 0px;
}

#followTab a.facebook:hover {
    background-position: 0 -57px;
}

/* "Google" button */

#followTab a.google {
    height: 57px;
    background-position: 0 -114px;
}
#followTab a.google:hover {
    background-position: 0 -171px;
}

/* "Twitter" button */

#followTab a.twitter {
    height: 57px;
    background-position: 0 -228px;
}
#followTab a.twitter:hover {
    background-position: 0 -285px;
}


/* main menu */
#navbod{
    width: 1050px;
    color: #666;
    margin: 0 auto;
}
#basicSearch {
    float: right;
    position: relative;
    list-style: none;
    padding-right: 30px;
    padding-left: 40px;
    padding-top: 3px;
    padding-bottom: 10px;
    font-size: 12px;
    background-repeat: no-repeat;    
    background-image: url(../images/search-icon.png);
}
#nav {
    margin: 0;
    padding: 7px 6px 0;
    line-height: 100%;
    border-radius: 2em;
    font-size: 16px;

    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

    background: #8b8b8b; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */

    border: solid 1px #6d6d6d;
}
#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    z-index: 20;
}
/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding:  8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #d1d1d1; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

    color: #444;
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#nav ul a:hover {
    background: #0399d4 !important; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
    background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */

    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
    background: #ddd; /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

    display: none;
    margin: 0;
    padding: 0;
    width: 200px;
    position: absolute;
    top: 35px;
    left: 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
    display: block;
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#nav {
    display: inline-block;
}
html[xmlns] #nav {
    display: block;
}
* html #nav {
    height: 1%;
}

/* white background content */
#content {
    background-color: #ffffff;
    width: 1000px;
    min-height: 600px;
    margin: 0 auto;
}

#contentText{
    width:90%; 
    padding-top:20px; 
    margin: 0px auto; 
    padding-bottom:25px; 
    background:url(../images/crosslines.png) no-repeat right 20px;
}

h2{
    width:auto; 
    margin-top:9px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:26px; 
    color:#04acec;
    font-weight:bold; 
    line-height:30px; 
    letter-spacing:-1.7px
}
h2 span{
    color:#3b3b3b; 
    text-transform:uppercase; 
    margin-right:5px
}
#greyacross									
{width:100%; height:50px; left:-24px; border-top:#c9c9c9 solid 1px; background:url(../images/pat.png) repeat}
#greyacross h3									
{min-width:274px; line-height:30px; margin:10px 0 0 24px;}
h3                                                                              
{width:auto; font-size:26px; color:#31a1ff; font-weight:bold; line-height:40px; letter-spacing:-1.7px}
h3 span										
{color:#3b3b3b; margin-right:0px}

#content p{
    width:90%; 
    margin: 0px auto; 
    padding-top: 10px;
    font-size:12px; 
    color:#4d4d4d; 
    line-height:18px;
    border-top:#c9c9c9 solid 1px; 
}

#wrap90 {
    width:90%; 
    margin: 0px auto; 
    padding-top: 30px;
    font-size:12px; 
    color:#4d4d4d; 
    line-height:18px;
    border-top:#c9c9c9 solid 1px; 
}
#columnLeft {
    width:30%; 
    margin: 0px; 
    padding: 0px;
    color:#4d4d4d; 
    line-height:18px;
    border-right:#c9c9c9 solid 1px; 
    float: left;
}
#columnRight {
    width:60%; 
    margin: 0px; 
    padding-left: 5%;
    font-size:12px; 
    color:#4d4d4d;
    float: left;
}



#footer {
    width: 1000px;
    margin:0 auto;
    height: 25px;
    text-align: center;
    font-size: small;
    padding-top: 10px;
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;

    background: #ffffff;  /* for non-css3 browsers */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ffffff,  #cccccc); /* for firefox 3.6+ */

    color: #999999;
    border-bottom: solid 1px #cccccc;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}


/*from main*/

/* GENERAL */

.spinner {
    padding: 5px;
    position: absolute;
    right: 0;
}

#grailsLogo {
    padding:20px;
}

a:link, a:visited, a:hover {
    color: #666;
    font-weight: bold;
    text-decoration: none;
}

h1 {
    color: #48802c;
    font-weight: normal;
    font-size: 16px;
    margin: .8em 0 .3em 0;
}

ul {
    padding-left: 15px;
}

input, select, textarea {
    background-color: #fcfcfc;
    border: 1px solid #ccc;
    font: 12px verdana, arial, helvetica, sans-serif;
    margin: 2px 0;
    padding: 2px 4px;
}
input:hover{
background-color: skyblue;
}
select {
    padding: 2px 2px 2px 0;
}
textarea {
    width: 250px;
    height: 150px;
    vertical-align: top;
}

input:focus, select:focus, textarea:focus {
    border: 1px solid #b2d1ff;
}

/* NAVIGATION MENU */

.nav {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-style: solid none solid none;
    padding: 7px 12px;
}

.menuButton {
    font-size: 10px;
    padding: 0 5px;
}
.menuButton a {
    color: #333;
    padding: 4px 6px;
}
.menuButton a.home {
    background: url(../images/skin/house.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}
.menuButton a.list {
    background: url(../images/skin/database_table.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}
.menuButton a.create {
    background: url(../images/skin/database_add.png) center left no-repeat;
    color: #333;
    padding-left: 25px;
}

/* MESSAGES AND ERRORS */

.message {
    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
    border: 1px solid #b2d1ff;
    color: #006dba;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}

div.errors {
    background: #fff3f3;
    border: 1px solid red;
    color: #cc0000;
    margin: 10px 0 5px 0;
    padding: 5px 0 5px 0;
}
div.errors ul {
    list-style: none;
    padding: 0;
}
div.errors li {
    background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
    line-height: 16px;
    padding-left: 30px;
}

td.errors select {
    border: 1px solid red;
}
td.errors input {
    border: 1px solid red;
}
td.errors textarea {
    border: 1px solid red;
}

/* TABLES */

table {
    border: 1px solid #ccc;
    width: 100%
}
tr {
    border: 0;
}
td, th {
    font: 12px verdana, arial, helvetica, sans-serif;
    line-height: 12px;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
}
th {
    background: #fff url(../images/skin/shadow.jpg);
    color: #666;
    font-size: 12px;
    font-weight: bold;
    line-height: 17px;
    padding: 2px 6px;
}
th a:link, th a:visited, th a:hover {
    color: #333;
    display: block;
    font-size: 10px;
    text-decoration: none;
    width: 100%;
}
th.asc a, th.desc a {
    background-position: right;
    background-repeat: no-repeat;
}
th.asc a {
    background-image: url(../images/skin/sorted_asc.gif);
}
th.desc a {
    background-image: url(../images/skin/sorted_desc.gif);
}

.odd {
    background: #f7f7f7;
}
.even {
    background: #fff;
}

/* LIST */

.list table {
    border-collapse: collapse;
}
.list th, .list td {
    border-left: 1px solid #ddd;
}
.list th:hover, .list tr:hover {
    background: #b2d1ff;
}

/* PAGINATION */

.paginateButtons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-top: 0;
    color: #666;
    font-size: 12px;
    overflow: hidden;
    padding: 10px 3px;
}
.paginateButtons a {
    background: #fff;
    border: 1px solid #ccc;
    border-color: #ccc #aaa #aaa #ccc;
    color: #666;
    margin: 0 3px;
    padding: 2px 6px;
}
.paginateButtons span {
    padding: 2px 3px;
}

/* DIALOG */

.dialog table {
    padding: 5px 0;
}

.prop {
    padding: 5px;
}
.prop .name {
    text-align: left;
    width: 15%;
    white-space: nowrap;
}
.prop .value {
    text-align: left;
    width: 85%;
}

/* ACTION BUTTONS */

.buttons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
    overflow: hidden;
    padding: 0;
}

.buttons input {
    background: #fff;
    border: 0;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    margin-left: 3px;
    overflow: visible;
    padding: 2px 6px;
}
.buttons input.delete {
    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
    padding-left: 28px;
}
.buttons input.edit {
    background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
    padding-left: 28px;
}
.buttons input.save {
    background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
    padding-left: 28px;
}